/* 工具提示组件 - HarmonyOS设计指南实现 */

@import '../base/color.less';
@import '../base/font.less';
@import '../base/window.less';

/* 工具提示变量 */
:root {
  --tooltip-padding: calc(8 * var(--unit)) calc(12 * var(--unit));
  --tooltip-padding-small: calc(6 * var(--unit)) calc(10 * var(--unit));
  --tooltip-padding-large: calc(10 * var(--unit)) calc(16 * var(--unit));
  --tooltip-border-radius: calc(4 * var(--unit));
  --tooltip-font-size: var(--font-size-caption-medium);
  --tooltip-font-size-small: var(--font-size-caption-small);
  --tooltip-font-size-large: var(--font-size-body-small);
  --tooltip-bg-color: rgba(0, 0, 0, 0.85);
  --tooltip-text-color: #ffffff;
  --tooltip-arrow-size: calc(6 * var(--unit));
  --tooltip-max-width: calc(200 * var(--unit));
  --tooltip-z-index: 1050;
  --tooltip-transition-duration: 0.2s;
}

/* 基础工具提示样式 */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip-content {
  position: absolute;
  z-index: var(--tooltip-z-index);
  padding: var(--tooltip-padding);
  font-size: var(--tooltip-font-size);
  line-height: 1.5;
  color: var(--tooltip-text-color);
  background-color: var(--tooltip-bg-color);
  border-radius: var(--tooltip-border-radius);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--tooltip-transition-duration) ease,
              transform var(--tooltip-transition-duration) ease;
  max-width: var(--tooltip-max-width);
  word-wrap: break-word;
  white-space: normal;
  box-shadow: 0 calc(2 * var(--unit)) calc(8 * var(--unit)) rgba(0, 0, 0, 0.15);
}

/* 工具提示箭头 */
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

/* 工具提示位置 - 顶部 */
.tooltip-top,
.tooltip.top {
  .tooltip-content {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(calc(-4 * var(--unit))) scale(0.8);
    margin-bottom: var(--tooltip-arrow-size);
  }
  
  .tooltip-arrow {
    bottom: calc(-1 * var(--tooltip-arrow-size));
    left: 50%;
    transform: translateX(-50%);
    border-width: var(--tooltip-arrow-size) var(--tooltip-arrow-size) 0;
    border-color: var(--tooltip-bg-color) transparent transparent;
  }
  
  &:hover .tooltip-content,
  &.active .tooltip-content {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* 工具提示位置 - 底部 */
.tooltip-bottom,
.tooltip.bottom {
  .tooltip-content {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(calc(4 * var(--unit))) scale(0.8);
    margin-top: var(--tooltip-arrow-size);
  }
  
  .tooltip-arrow {
    top: calc(-1 * var(--tooltip-arrow-size));
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 var(--tooltip-arrow-size) var(--tooltip-arrow-size);
    border-color: transparent transparent var(--tooltip-bg-color);
  }
  
  &:hover .tooltip-content,
  &.active .tooltip-content {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* 工具提示位置 - 左侧 */
.tooltip-left,
.tooltip.left {
  .tooltip-content {
    right: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(calc(-4 * var(--unit))) scale(0.8);
    margin-right: var(--tooltip-arrow-size);
  }
  
  .tooltip-arrow {
    right: calc(-1 * var(--tooltip-arrow-size));
    top: 50%;
    transform: translateY(-50%);
    border-width: var(--tooltip-arrow-size) 0 var(--tooltip-arrow-size) var(--tooltip-arrow-size);
    border-color: transparent transparent transparent var(--tooltip-bg-color);
  }
  
  &:hover .tooltip-content,
  &.active .tooltip-content {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
  }
}

/* 工具提示位置 - 右侧 */
.tooltip-right,
.tooltip.right {
  .tooltip-content {
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(calc(4 * var(--unit))) scale(0.8);
    margin-left: var(--tooltip-arrow-size);
  }
  
  .tooltip-arrow {
    left: calc(-1 * var(--tooltip-arrow-size));
    top: 50%;
    transform: translateY(-50%);
    border-width: var(--tooltip-arrow-size) var(--tooltip-arrow-size) var(--tooltip-arrow-size) 0;
    border-color: transparent var(--tooltip-bg-color) transparent transparent;
  }
  
  &:hover .tooltip-content,
  &.active .tooltip-content {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
  }
}

/* 工具提示尺寸 */
.tooltip-small,
.tooltip.small {
  .tooltip-content {
    padding: var(--tooltip-padding-small);
    font-size: var(--tooltip-font-size-small);
  }
}

.tooltip-large,
.tooltip.large {
  .tooltip-content {
    padding: var(--tooltip-padding-large);
    font-size: var(--tooltip-font-size-large);
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .tooltip-content {
    --tooltip-bg-color: rgba(255, 255, 255, 0.85);
    --tooltip-text-color: #000000;
  }
}

